<template>
  <!-- 搜索框 -->
  <div class="serch">
    <div class="qq" iconfont icon-zuojiantou>QQ音乐</div>
    <div class="top-serch">
      <div class="left">
        <i class="iconfont icon-sousuo"></i>
        <input
          type="text"
          v-model="serchData"
          @focus="focus"
          @blur="blur"
          @input="inputChange"
          placeholder="搜索音乐、视频"
        />
        <!-- 添加一个条件渲染 -->
        <span v-if="serchData.length" @click="serchData = ''">X</span>
      </div>
      <!-- 取消  -->
      <div class="right" v-if="showQ" @click="$router.go(-1)">取消</div>
    </div>
    <!-- 展示的内容：1没有值的时候  2有值的情况 -->
    <div class="noDataShow" v-if="serchShow">
      <h2>热门搜索</h2>
      <div class="list">
        <div>晚安-颜人中</div>
        <br />
        <div>晴天-周杰伦</div>
        <br />
        <div>别熬夜了-火晚晴</div>
      </div>
    </div>

    <!-- 展示内容
      getSerchList.length>0 搜索有结果=》显示搜索结果  反之没有数据，不显示
    -->

    <div class v-if="getSerchList.length > 0">
      <h2>搜索 {{ serchData }}</h2>
      <div v-for="item in getSerchList" :key="item.id">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { serchData } from "@/http/api/serch.js";
export default {
  data() {
    return {
      getSerchList: [], //获取到搜索的数据
      serchShow: false, //显示历史搜索  首次加载不显示 false
      res: true,
      showQ: true, //显示取消（）
      serchData: "", //获取用户输入数据
    };
  },

  methods: {
    //input聚焦事件
    focus() {
      console.log("input聚焦");
      this.showQ = true;
      this.serchShow = false;
    },
    //input脱标事件
    blur() {
      console.log("input脱标事件");
      this.showQ = false;
      if (!this.serchData) {
        this.serchShow = true;
      }
    },
    //点击取消
    inputChange() {
      // 发送请求
      //  1. 添加一个全局变量 防止多次请求
      if (this.res) {
        this.res = false;
        this.getSerchData(this.serchData);
      }
    },
    // 异步
    getSerchData(value) {
      serchData("/search", { keywords: value }).then((res) => {
        console.log(res);
        //请求完毕
        this.res = true;
        //后台给你的数据=》可能没有，可能有
        if (res.code == 400) {
          //
          //没有搜索到结果
          this.getSerchList = [];
        }

        if (res.code == 200) {
          //有数据
          this.getSerchList = res.result.songs;
        }
      });
    },
    //点击取消=》1搜索的内为空
    Clickcancels() {
      console.log("取消");
      //1搜索的内为空
      this.serchData = "";
      //2搜索的数据也为空
      this.getSerchList = [];

      //3热门显示
      this.serchShow = true;
    },
  },
};
</script>

<style scoped lang="less">
.serch {
  padding: 20px 30px;
  color: #ddd;
  margin-bottom: 600px;
  .qq {
    text-align: center;
    font-size: 1.5rem;
    color: #666;
  }
  .top-serch {
    height: 300px;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      background: #fff;
      border-radius: 70px;
      height: 100%;
      width: 78%;
      display: flex;
      padding: 0 20px;
      //   justify-content: space-between;
      align-items: center;
      i {
        margin-right: 40px;
      }
      input {
        width: 1110px;
        margin-right: 40px;
      }
    }
  }
  // .noDataShow {
  //   //   background: #fff;
  //   //   height:100%;
  // }
}
</style>